<template>
  <!-- 头部左侧 -->
  <div class="l-content" style="text-align: left;width: 500px;margin-top: 20px;display: flex;">
    <el-button size="small" @click="handleCollapse" style="margin-right: 15px;">
      <el-icon :size="20">
        <Menu/>
      </el-icon>
    </el-button>
    <!-- 面包屑 -->
    <el-breadcrumb :separator-icon="ArrowRight" style="line-height: 24px;">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item v-for="item in $route.meta" :key="item.path">
        <router-link v-if="item.url" :to="item.url">{{ item.title }}</router-link>
        <a v-else>{{ item.title }}</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>

  <!-- 头部右侧 -->
  <div class="r-content" style="float: right;margin-top: -8px;">
    <span style="position: relative;bottom:27px;">
      <img class="userAvatar" :src="avatar"/>
      <span>{{ username }}</span>
    </span>
    <el-dropdown>
      <el-icon style="margin-left: 8px; margin-top: 1px;color: #000;">
        <ArrowDown/>
      </el-icon>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="logout">安全退出</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import {useIsCollapseStore} from "../store/useCollapseStore";
import {ArrowRight} from '@element-plus/icons-vue'
import {useRouter} from 'vue-router'
import {useUserStore} from "../store/useUserStore";
import {tokenName,userName} from "../config";

const userStore = useUserStore()
const router = useRouter()
const collapseStore = useIsCollapseStore()
const username = localStorage.getItem(userName) ? JSON.parse(localStorage.getItem(userName)).nickname : 'Ikun'
const avatar = localStorage.getItem(userName) ? JSON.parse(localStorage.getItem(userName)).avatar : ''



//改变侧边栏状态
const handleCollapse = () => {
  collapseStore.changeIsCollapse()
}

// 安全退出
const logout = () => {
  localStorage.removeItem(tokenName)
  localStorage.removeItem(userName)
  userStore.user = {}
  router.push('/login')
}

</script>

<style scoped>
.userAvatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
</style>
